<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-operator" style="float: right">
        <a-button type="primary" @click="onAdd" icon="plus">新建</a-button>
      </div>
      <a-divider />
      <s-table rowKey="id" size="default" :columns="columns" :data="loadData" ref="table">
        <span slot="created_at" slot-scope="text">{{ text | timeFormat }}</span>
        <span slot="status" slot-scope="status, item">
          <a-switch :default-checked="status == '1'" @change="onStatusChange(item)" />
        </span>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" size="small" @click="handleEdit(record)">编辑</a-button>
          <a-divider type="vertical" />
          <a-popconfirm title="确认删除分类吗？" @confirm="handleDelete(record)">
            <a-button type="link" size="small">删除</a-button>
          </a-popconfirm>
        </span>
      </s-table>
    </a-card>
    <a-modal v-model="visibleEdit" title="修改分类名称" :confirmLoading="confirmLoading" @ok="onEditOk">
      <a-input placeholder="请输入分类名称" v-model.trim="currentCat.name" />
    </a-modal>
    <a-modal v-model="visibleAdd" title="添加分类" :confirmLoading="confirmLoading" @ok="onAddOk">
      <a-input placeholder="请输入分类名称" v-model.trim="currentCat.name" />
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getList, changeStatus, deleteCat, changeName, addCat } from '@/api/saas/integralCat'

const columns = [
  {
    title: 'ID',
    dataIndex: 'id'
  },
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '状态',
    dataIndex: 'is_enable',
    scopedSlots: {
      customRender: 'status'
    }
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    scopedSlots: {
      customRender: 'created_at'
    }
  },
  {
    title: '操作',
    width: '250px',
    dataIndex: 'action',
    scopedSlots: {
      customRender: 'action'
    }
  }
]
export default {
  name: 'SaasIntegralCat',
  components: {
    STable
  },
  data () {
    return {
      columns,
      loadData: (parameter) => {
        return getList(parameter)
          .then((res) => {
            return res.data
          })
          .catch((err) => {
            this.$message.error(err.message)
            this.$refs.table.localLoading = false
          })
      },
      visibleEdit: false,
      confirmLoading: false,
      currentCat: {
        name: ''
      },
      visibleAdd: false
    }
  },
  methods: {
    handleDelete: function (item) {
      this.$message.loading({ content: '处理中...', key: 'deleteLoading' })
      deleteCat({ id: item.id }).then(res => {
        if (res.code == 0) {
          this.$refs.table.refresh()
          this.$message.success({ content: res.msg, key: 'deleteLoading' })
        } else {
          this.$message.warning({ content: res.msg, key: 'deleteLoading' })
        }
      })
    },
    handleEdit: function (item) {
      this.currentCat = Object.assign({}, item)
      this.visibleEdit = true
    },
    onEditOk: function () {
      if (this.currentCat.name == '') {
        this.$message.warning('分类名称不能为空!')
        return
      }
      this.confirmLoading = true
      changeName({ id: this.currentCat.id, name: this.currentCat.name }).then(res => {
        if (res.code == 0) {
          this.$refs.table.refresh()
          this.$message.success(res.msg)
          this.visibleEdit = false
        } else {
          this.$message.warning(res.msg)
        }
      }).catch(error => {
        console.log(error)
      }).then(() => {
        this.confirmLoading = false
      })
    },
    onStatusChange: function (item) {
      this.$message.loading({ content: '处理中...', key: 'changeLoading' })
      changeStatus({ id: item.id }).then(res => {
        if (res.code == 0) {
          this.$refs.table.refresh()
          this.$message.success({ content: res.msg, key: 'changeLoading' })
        } else {
          this.$message.warning({ content: res.msg, key: 'changeLoading' })
        }
      })
    },
    onAdd: function () {
      this.currentCat.name = ''
      this.visibleAdd = true
    },
    onAddOk: function () {
      if (this.currentCat.name == '') {
        this.$message.warning('分类名称不能为空!')
        return
      }
      this.confirmLoading = true
      addCat({ name: this.currentCat.name }).then(res => {
        if (res.code == 0) {
          this.$refs.table.refresh(true)
          this.$message.success(res.msg)
          this.visibleAdd = false
        } else {
          this.$message.warning(res.msg)
        }
      }).catch(error => {
        console.log(error)
      }).then(() => {
        this.confirmLoading = false
      })
    }
  }
}
</script>

<style scoped>

</style>
